<template>
    <div class="container">
        <div class="top" v-if="login">
            <van-image :src="userInfo.image" round></van-image>
            <span>{{ userInfo.name }}</span>
        </div>
        <div class="top" v-else>
            <van-image :src="userInfo.image" round></van-image>
            <span>{{ userInfo.name }}</span>
        </div>
        <van-cell-group>
            <van-cell title="去游览" is-link icon="content" to="/Home"/>
            <van-cell title="去预定" is-link icon="content" to="/Rent"/>
            <van-cell title="查看预定记录" is-link icon="content" to="/RentRecord" />
            <van-cell title="去登陆" is-link icon="content" to="/Login" />
            <van-cell title="退出登录" is-link icon="content" @click="destory"/>
        </van-cell-group>
    </div>
</template>

<script setup lang="ts">
    import { ref, reactive } from 'vue'

    const login = ref(false)

    const userInfo = reactive({
        name:sessionStorage.username,
        image:'/images/中式传统龙凤嫁衣.jpg',
    })

    const destory = () => {
        sessionStorage.clear();
        alert('已清除用户登录信息');
    }

</script>

<style lang="scss" scoped>
    .container {
        padding: 4rem 1rem 1.5rem 1rem;
        .top {
            display: flex;
            flex-direction: column;
            .van-image {
                width: 5rem;
                height: 5rem;
                left: 50%;
                transform: translate(-50%);
            }
            span {
                text-align: center;
            }
        }
        .van-cell-group {
            background-color: transparent;
        }

        .van-cell{
            margin-top: 0.5rem;
            border-radius: 1rem;
        }
    }
</style>